import React, { lazy, Suspense } from 'react';
import { createHashRouter, createBrowserRouter, RouteObject } from 'react-router-dom';

// component
import RootErrorBoundary from '@/app/root-error-boundary/page'; // root错误边界
import NomatchPage from '@/app/nomatch';

// lazy page
const RootLayout = lazy(() => import('@/app/layout'));
const RootPage = lazy(() => import('@/app/page'));

// 登录注册页
const LoginPage = lazy(() => import('@/app/login/page'));
const RegisterPage = lazy(() => import('@/app/register/page'));
// 官网
const PortalLayout = lazy(() => import('@/app/portal/layout'));
const PortalPage = lazy(() => import('@/app/portal/page'));
const SettingsLayoutPage = lazy(() => import('@/app/portal/settings/layout'));
const SettingsPage = lazy(() => import('@/app/portal/settings/page'));
const SettingsAccountPage = lazy(() => import('@/app/portal/settings/account/page'));
const SettingsGeneralPage = lazy(() => import('@/app/portal/settings/general/page'));
const MessagesPage = lazy(() => import('@/app/portal/messages/page'));
const AboutPage = lazy(() => import('@/app/portal/about/page'));
// 控制台
const ConsoleLaout = lazy(() => import('@/app/console/layout'));
const ConsolePage = lazy(() => import('@/app/console/page'));
const OrderPage = lazy(() => import('@/app/console/orders/page'));
const ProductsPage = lazy(() => import('@/app/console/products/page'));
const ProductUpsert = lazy(() => import('@/app/console/products-upsert/page'));
const UsersPage = lazy(() => import('@/app/console/users/page'));

// 路由
const router = createBrowserRouter([
    {
        path: '/',
        element: (
            <Suspense fallback={<>...</>}>
                <RootLayout />
            </Suspense>
        ),
        errorElement: <RootErrorBoundary />,
        children: [
            {
                index: true,
                element: (
                    <Suspense>
                        <RootPage />
                    </Suspense>
                ),
            },
            {
                path: 'login',
                element: (
                    <Suspense fallback={<>...</>}>
                        <LoginPage />
                    </Suspense>
                ),
            },
            {
                path: 'register',
                element: (
                    <Suspense fallback={<>...</>}>
                        <RegisterPage />
                    </Suspense>
                ),
            },
            {
                path: 'portal',
                element: (
                    <Suspense fallback={<>...</>}>
                        <PortalLayout />
                    </Suspense>
                ),
                errorElement: <RootErrorBoundary />,
                children: [
                    {
                        index: true,
                        element: (
                            <Suspense>
                                <PortalPage />
                            </Suspense>
                        ),
                    },
                    {
                        path: 'messages',
                        element: (
                            <Suspense fallback={<>......</>}>
                                <MessagesPage />
                            </Suspense>
                        ),
                    },
                    {
                        path: 'about',
                        element: (
                            <Suspense fallback={<>......</>}>
                                <AboutPage />
                            </Suspense>
                        ),
                    },
                    {
                        path: 'settings',
                        element: (
                            <Suspense fallback={<>......</>}>
                                <SettingsLayoutPage />
                            </Suspense>
                        ),
                        children: [
                            {
                                index: true,
                                element: (
                                    <Suspense fallback={<>......</>}>
                                        <SettingsPage />
                                    </Suspense>
                                ),
                            },
                            {
                                path: 'account',
                                element: (
                                    <Suspense fallback={<>......</>}>
                                        <SettingsAccountPage />
                                    </Suspense>
                                ),
                            },
                            {
                                path: 'general',
                                element: (
                                    <Suspense fallback={<>......</>}>
                                        <SettingsGeneralPage />
                                    </Suspense>
                                ),
                            },
                        ],
                    },
                    {
                        path: '*',
                        element: (
                            <Suspense fallback={<>...</>}>
                                <NomatchPage />
                            </Suspense>
                        ),
                    },
                ],
            },
            {
                path: 'console',
                element: (
                    <Suspense fallback={<>...</>}>
                        <ConsoleLaout />
                    </Suspense>
                ),
                errorElement: <RootErrorBoundary />,
                children: [
                    {
                        index: true,
                        element: (
                            <Suspense>
                                <ConsolePage />
                            </Suspense>
                        ),
                    },
                    {
                        path: 'orders',
                        element: (
                            <Suspense fallback={<>......</>}>
                                <OrderPage />
                            </Suspense>
                        ),
                    },
                    {
                        path: 'users',
                        element: (
                            <Suspense fallback={<>......</>}>
                                <UsersPage />
                            </Suspense>
                        ),
                    },
                    {
                        path: 'products',
                        element: (
                            <Suspense fallback={<>......</>}>
                                <ProductsPage />
                            </Suspense>
                        ),
                    },
                    {
                        path: 'products/upsert',
                        element: (
                            <Suspense fallback={<>......</>}>
                                <ProductUpsert />
                            </Suspense>
                        ),
                    },
                    {
                        path: 'messages',
                        element: (
                            <Suspense fallback={<>......</>}>
                                <MessagesPage />
                            </Suspense>
                        ),
                    },
                    {
                        path: 'settings',
                        element: (
                            <Suspense fallback={<>......</>}>
                                <SettingsLayoutPage />
                            </Suspense>
                        ),
                        children: [
                            {
                                index: true,
                                element: (
                                    <Suspense fallback={<>......</>}>
                                        <SettingsPage />
                                    </Suspense>
                                ),
                            },
                            {
                                path: 'account',
                                element: (
                                    <Suspense fallback={<>......</>}>
                                        <SettingsAccountPage />
                                    </Suspense>
                                ),
                            },
                            {
                                path: 'general',
                                element: (
                                    <Suspense fallback={<>......</>}>
                                        <SettingsGeneralPage />
                                    </Suspense>
                                ),
                            },
                        ],
                    },
                    {
                        path: '*',
                        element: (
                            <Suspense fallback={<>...</>}>
                                <NomatchPage />
                            </Suspense>
                        ),
                    },
                ],
            },
            {
                path: '*',
                element: (
                    <Suspense fallback={<>...</>}>
                        <NomatchPage />
                    </Suspense>
                ),
            },
        ],
    },
    {
        path: '*',
        element: (
            <Suspense fallback={<>...</>}>
                <NomatchPage />
            </Suspense>
        ),
    },
]);
if ((import.meta as any).hot) {
    // console.log('hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh');
    (import.meta as any).hot.dispose(() => router.dispose());
}
export default router;
